<div class="stats">

  <div class="btn-group pull-right" role="group">
    <button ng-click="stats.switchView()" type="button" class="btn btn-default" ng-class="{'active': stats.view =='graph'}" title="{{'analytics.graphview' | translate}}">
      <i class="glyphicon glyphicon-stats"></i>
    </button>
    <button ng-click="stats.switchView()" type="button" class="btn btn-default" ng-class="{'active': stats.view =='table'}" title="{{'analytics.dataview' | translate}}">
      <i class="glyphicon glyphicon-th-list"></i>
    </button>
  </div>

  <h4>
    {{stats.title | translate}}
    <span ng-if="stats.data.granularity">
      {{'analytics.' + stats.data.granularity | translate}}
    </span>
  </h4>

  <div ng-show="stats.nodata && stats.data.$resolved" class="alert alert-warning">
    <i class="glyphicon glyphicon-alert"></i>&nbsp;
    <span translate>analytics.nodata</span>
  </div>

  <div ng-show="!stats.data.$resolved" class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    </div>
  </div>

  <div class="chartist" ng-show="stats.view=='graph' && stats.data.$resolved && !stats.nodata"></div>

  <table class="table table-bordered table-striped" ng-show="stats.view=='table'">
    <tr ng-repeat="value in stats.serie track by $index">
      <td>{{stats.parsed.labels[stats.serie.length - $index -1]}}</td>
      <td>{{value}}</td>
    </tr>
  </table>

  <!-- Download graph as PNG -->
  <button ng-click="stats.exportPNG()" class="btn btn-default btn-sm center-block" title="{{ 'analytics.saveAsPNG' | translate }}"
    ng-show="stats.view=='graph' && stats.data.$resolved && !stats.nodata">
    <i class="glyphicon glyphicon-save"></i>
  </button>

  <!-- Export data as CSV -->
  <button ng-click="stats.exportCSV()" class="btn btn-default btn-sm center-block" title="{{ 'analytics.saveAsCSV' | translate }}"
          ng-show="stats.view=='table' && stats.csvConfig && stats.data.$resolved && !stats.nodata">
    <i class="glyphicon glyphicon-save"></i>
  </button>

</div>
